<template>
    <div>
        <!--您未申请报名-->
        <div class="box-table white-bg" style="width:100%;height: 300px;" v-if="freshData && !unregistered  ">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data" style="margin-top: -50px;">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ promptOne }}</p>
                    <p class="color999">{{ promptTwo }}</p>
                </div>
            </div>
        </div>
        <!--报名成功后，没有内容-->
        <div class="box-table white-bg" style="width:100%;height: 300px;" v-if="freshData && !isIntegrated && ((unregistered && (!freshCourseItems || freshCourseItems.length <= 0)))">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                </div>
            </div>
        </div>
        <!--报名成功后，有内容，跳到网上课程-->
        <ul class="conent-list" v-if="freshData && unregistered  && (freshCourseItems && freshCourseItems.length > 0) && !isIntegrated">
            <li class="white-bg" v-for="(content,index) in freshCourseItems" :key="index">
                <p v-if="content.nodeType < 1 && content.childList && content.childList.length > 0" class="word-title-02 paddingLR15 clearfix" @click="unfoldModule(index)"><span class="word-clamp-1">{{ content.nodeTitle }}</span><i class="more-icon" :class="{'cur' : moreCourse != false && index == clickindex}"></i></p>
                <!--有模块夹-->
                <div class="module-box-20" v-if="content.nodeType < 1 && moreCourse" v-show="index == clickindex">
                    <template v-if="content.childList && content.childList.length > 0">
                      <div class="box" v-for="(listInfo,index) in content.childList" :key="index">
                        <information-module :list="listInfo" :unregistered="unregistered" :tkhId="freshData.appTkhId" :itmId="freshData.itmId" :resId="freshData.resId" :userEntId="userEntId"></information-module>
                        <div class="border-bottom2"></div>
                    </div>
                    </template>
                </div>
                <!--没有模块夹-->
                <div class="module-box-20" v-if="content.nodeType === 1">
                    <div class="box">
                        <information-module :list="content" :unregistered="unregistered" :tkhId="freshData.appTkhId" :itmId="freshData.itmId" :resId="freshData.resId" :userEntId="userEntId"></information-module>
                    </div>
                </div>
            </li>
        </ul>
        <!--报名成功后，有内容，跳转到项目式课程-->
        <div v-if="isIntegrated && unregistered && integratedContent == true">
            <integrated-module></integrated-module>
        </div>
    </div>
</template>

<script>
import InformationModule from '@/components/certifiedCourse/InformationModule';
import IntegratedModule from '@/components/certifiedCourse/Integrated';
import { Button } from 'vant';
export default {
    name: 'Contents',
    props: ['data', 'isIntegrated'],
    components: {
        InformationModule,
        IntegratedModule,
        [Button.name]: Button
    },
    data() {
        return {
            tips: false,
            errorTips: false,
            examDetail: '',
            course: {},
            item: {}, //课程基本信息
            app: {}, //学员报名信息
            courseEvaluation: {}, //课程学习记录
            cosContent: {}, //网上内容
            btnNum: '', //该属性是旧的逻辑用于控制一些按钮（如报名按钮）显示的标记
            result: 'notapp', //报名结果
            unregistered: false, //未报名1，等待队列与等待审批也算报名成功
            unregisteredTwo: false, //未报名2，等待队列与等待审批不算报名成功
            promptOne: '', //第一句提示语
            promptTwo: '', //第二句提示语
            moreCourse: false, //模块里的课程
            clickindex: '', //展开模块课程的点击index
            integratedContent: false, //项目式培训有没有内容
            /*新的参数*/
            freshCourseItems: [], // 课程课件集合
            freshData: {}, // 课程内容详情
            applyStatus: '', //报名状态 icw.....和是否为空
            ofApproval: false, // 报名是否需要审核
            userEntId: window.localStorage.getItem('loginUser')
        };
    },
    computed: {
        cont() {
            return this.$store.getters.getUnregistered;
        }
    },
    methods: {
        setContent(data) {
            this.course = data;
            this.btnNum = this.course.btn; //该属性是旧的逻辑用于控制一些按钮（如报名按钮）显示的标记
            this.item = this.course.item; //课程基本信息
            this.app = data.app || {}; //学员报名信息
            /**************************************************/
            this.freshData = data;
            this.applyStatus = data.learnerStatus;
            this.freshCourseItems = data.contentList;
            this.unregistered = this.$store.getters.hasApped(this.applyStatus);
            if (data.courseEnum === 'OPEN_COURSE') {
                this.unregistered = true;
            }
            this.unregisteredTwo = this.$store.getters.hasAppPassed(this.applyStatus);
            this.getContentTipInfo(this.unregistered, data.isApproval);
            /**************************************************/
            this.courseEvaluation = this.course.courseEvaluation; //课程学习记录    I C 这些
            //   this.cosContent = this.course.coscontent; //网上内容   课件内容
            this.appStatus = this.getAppStatus(data.app, this.courseEvaluation); //报名学状态
            //  this.unregistered = !this.$store.getters.hasApped(this.appStatus); //报名不成功1
            //  this.unregisteredTwo = !this.$store.getters.hasAppPassed(this.appStatus); //报名不成功2
            /*判断项目式培训有没有内容*/
            if (this.isIntegrated === true) {
                if (this.course.integratedCourseModuleDTO && Object.keys(this.course.integratedCourseModuleDTO).length === 0) {
                    this.integratedContent = false; //没有内容
                } else {
                    this.integratedContent = true; //有内容
                }
            }
        },
        subTime(value) { //yyyy-MM-dd HH:mm
            if (value) {
                return value.substring(0, value.indexOf(':', value.indexOf(':') + 1));
            } else {
                return value;
            }
        },
        getContentTipInfo(unregistered, applyStatus) { // 现在报名只有是否需要审批
            let _this = this.$root;
            let btnNum = 1;
            if (applyStatus) {
                btnNum = 4;
            }
            if (!unregistered) { //还没报名
                switch (btnNum) {
                case 1:
                    this.promptOne = _this.$t('cos_content_click_to_apply'); //您未申请报名 报名成功后才能开始学习
                    this.promptTwo = _this.$t('cos_content_click_to_begin');
                    break;
                case 4 : //未报名，但该课程是需要报名审批通过后才能学习的情况
                    this.promptOne = _this.$t('cos_content_apply_tip_1'); //该课程需要先提交报名申请,等待管理员或上司审批通过才能开始学习
                    this.promptTwo = _this.$t('cos_content_apply_tip_2');
                    break;
                // case 7 : //未报名，但名额已满
                //     this.promptOne = _this.$t('cos_full_capacity');//学习名额已满
                //     this.promptTwo = '';
                //     break;
                // case -1 : //未报名，但还没开始报名，或报名时间已过
                //     let nowData = new Date().getTime();
                //     let oldDate = new Date(this.item.itm_appn_start_datetime).getTime();
                //     if (this.item.itm_appn_end_datetime === '9999-12-31 23:59:59') {
                //         this.endDate = _this.$t('cos_unlimited'); //不限
                //     } else {
                //         this.endDate = this.subTime(this.item.itm_appn_end_datetime);
                //     }
                //     if (oldDate > nowData) { //报名期限未开始
                //         //this.promptOne = '1';
                //         this.promptOne = _this.$t('cos_enroll_duration') + '：' + _this.$t('time_from') + this.subTime(this.item.itm_appn_start_datetime) + ' ' + _this.$t('time_to') + ' ' + this.endDate;
                //         this.promptTwo = _this.$t('cos_sign_up_not_permitted_1'); //报名时间未开始，目前不开放课程学习的报名申请
                //     } else { //报名期限已过
                //         //this.promptOne = '2';
                //         this.promptOne = _this.$t('cos_enroll_duration') + '：' + _this.$t('time_from') + this.subTime(this.item.itm_appn_start_datetime) + ' ' + _this.$t('time_to') + ' ' + this.endDate;
                //         this.promptTwo = _this.$t('cos_sign_up_not_permitted_2'); //'报名时间已结束，目前不开放课程学习的报名申请'
                //     }
                //     break;
                }
            }
        },
        /**
         *判断是否已报名
         * @param app 学员报名信息
         * @param courseEvaluation 课程学习记录
         * @returns {string}
         */
        getAppStatus(app, courseEvaluation) {
            var result = 'notapp';//默认未报名
            if (courseEvaluation && courseEvaluation.cov_status) {
                result = courseEvaluation.cov_status;
            } else if (app) {
                result = app.app_status;
            }
            return result;
        },
        unfoldModule(index) { //展开模块里的课程
            this.moreCourse = !this.moreCourse;
            this.clickindex = index;
        }
    },
    mounted() {
        this.$store.watch((store, getters) => {
            this.setContent(getters.getDetail);
        });
        this.setContent(this.$store.getters.getDetail);
        // this.getMapData();
        // this.$store.watch((store, getters) => {
        //     console.log(getters.getDetail);
        //     this.setContent(getters.getDetail);
        // });
        // this.$axios({
        //     method: 'GET',
        //     url: `/app/api/trainee/course/detail`,
        //     params: {
        //         itmId: this.$route.params.itmId,
        //         mobileInd: 1
        //     }
        // }).then((res) => {
        //     if (res && res.status === 200) {
        //         this.setContent(res.data);
        //     }
        // }).catch((err) => {
        //     console.log('err', err);
        //     this.setContent(this.$store.getters.getDetail);
        // });
        // this.getMapData();
        // console.log(this.isClass);
        // this.$once('hook:beforeDestroy', () => {
        //     console.log('hook:beforeDestroy');
        //     if (cancelWatch) {
        //         cancelWatch();
        //     }
        // });
    }
    // beforeRouteLeave(to, from, next) {
    //   console.log('join this')
    //     if (this.cancelWatch) {
    //         this.cancelWatch();
    //     }
    //     next();
    // }
};
</script>

<style scoped lang="less">
    @import "./courseLess.less";
    .word-title-02 {
        height: 60px;
        line-height: 60px;
        background: #fafafa;
        span {
            float: left;
            width: calc(100% - 26px);
        }
    }
    .more-icon {
        background-size: 13px;
        background-position: -2px 0;
        margin-top: 20px;
    }
    .more-icon.cur {
        width: 16px;
        background-position: 0 -20px;
    }
    .conent-list {
        li {
            border-bottom: 1px solid #e6e6e6;
            &:nth-last-child(1) {
                border-bottom: none;
            }
        }
    }
    .tips-box {
        display: flex;
        align-items: center;
    }
  h2::before{
    content: '';
    width: 5px;
    height: 15px;
    border-radius: 10px;
    display: inline-block;
    background-color: #003764;
    margin-right: 11px;
    margin-bottom: -2px;
  }
</style>
